<template>
	<view>
		<view>
			
			<view class="header" >
				<!-- <u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search> -->
				<u-search placeholder="搜索充电站/目的地"  :showAction=false disabled="true"  @click="search()"></u-search>
			</view>
			<view class="map_container">
				<map id="myMap" class="map" style="width: 100%; height: 100%;" :latitude="latitude"
					:longitude="longitude" :markers="markers" show-location @poitap="poitap"
					@callouttap="callouttap" @regionchange="regionchange"  @anchorpointtap="anchorpointtap"></map>
			</view>
			<!-- 显示距离 -->
			<!-- <view class="location">
				<text class="local">{{local}}</text>
				<text class="distance" v-if="range!==''">(距离你{{range}})</text>
				<u-button text="确定" @click="goback()"></u-button>
			</view> -->
			
			<!-- 点击气泡出现显示基本信息 -->
			<view class="location" v-if="markerId!==''" @click="stationinfo(station.stationId)">
				<!-- 地址 -->
				<text class="local">{{station.stationName}}({{station.address}})</text><br>
				<text class="local">{{station.synopsis}}</text><br>
				<text class="local">￥{{station.price}}</text>
				<text class="distance" v-if="range!==''">(距离你{{range}})</text>
			</view>
		</view>

	</view>
</template>

<script>
	import amapFile from "../../libs/amap-wx.130.js";
	var self, mapCtx
	export default {
		data() {
			return {
				key: 'c8f7954d1f55fc747ddb3dd039bc9cae',
				latitude: '',
				longitude: '',
				local: '',
				distance: '',
				// 标记点
				markers: [],
				markerother: [],
				range: '',
				circles: [],
				radius: 0,
				// 点击气泡显示详情
				markerId:'',
				//充电站信息
				station:[],
				
			}
		},
		//构造 AMapWX 对象，方便调用 getRegeo 方法
		onLoad() {
			self = this
			mapCtx = wx.createMapContext('myMap')
			self.getAuthorizeInfo()
			self.getLocationInfo()
			// var amaFile = require('../../libs/amap-wx.130.js')
			this.amapObject = new amapFile.AMapWX({
				key: 'c8f7954d1f55fc747ddb3dd039bc9cae'
			})
			// self.getmarker()

		},
		methods: {
			//
			search(){
				uni.navigateTo({
					url:"/pages/view/search/search"
				})
			},
			
			//起始获取充电站位置，显示在地图上
			onShow() {
				let that = this
				wx.request({
					url: "http://localhost:8081/station/showLocation",
					method: "POST",
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success(resp) {
						console.log(resp.data.data)
						for (let i = 0; i < resp.data.data.length; i++) {
							let data = resp.data.data[i];
							//使用 $set() 方法将每个 marker 对象添加到该数组中。
							//$set() 方法的第一个参数是待更改的对象，第二个参数是对象中要更改的属性的键名，第三个参数是键值。
							that.$set(that.markers, i, {
								id: data.stationId,
								latitude: data.dimensionality,
								longitude: data.longitude,
								// name: 'map',
								width: 12,
								height: 20,
								callout: {
									content: "￥" + data.price + "  空闲" + data.freeNum + "  " + data.chargingSpeed,
									display: "ALWAYS",
									borderWidth: 20,
									borderRadius: 10,
									// borderColor:"#00FFFF"
								}
							});

						}

					}
				})
			},

			//地图点击气泡,显示详情
			callouttap(e) {
				//e.detail.markerId为markerid
				console.log("===你点击了标记点===", e.detail.markerId)
				let that=this;
				that.markerId=e.detail.markerId;
				wx.request({
					url: "http://localhost:8081/station/showOne",
					method: "POST",
					data:{
						stationId:e.detail.markerId
					},
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success(resp){
						console.log(resp.data.data)
						that.station=resp.data.data
						//计算当前定位到充电站的距离
						var obj = resp.data.data
						 console.log(obj)
						var distance = that.getDistance(that.latitude, that.longitude, obj.dimensionality, obj.longitude)
						distance = parseInt(distance * 1000);
						if (distance != null && distance > 0) {
							that.range = distance + "米";
							if (distance >= 1000) {
								that.range = (Math.round(distance / 100) / 10).toFixed(1) + "公里";
							}
							console.log(that.range)
						}
					}
				})
			},
			//视野发生变化，让点击气泡产生的详情消失
			regionchange:function(){
				let that=this;
				this.markerId='';
			},
			//显示充电站详细信息
			stationinfo(stationId){
				//在起始页面跳转到test.vue页面并传递参数
				
				uni.navigateTo({
					url: '/pages/view/stationinfo/stationinfo?stationId='+stationId,
				});
			},
			
			
			
			
			
			
			
			// 位置授权
			getAuthorizeInfo() {
				//获取授权
				uni.authorize({
					scope: 'scope.userLocation',
					success() { // 允许授权
						uni.getLocation({
							success: function(res) {
								console.log("经纬度", res);
							},
						})
					},
					fail() { // 拒绝授权
						this.openConfirm();
						console.log("你拒绝了授权，无法获得周边信息")
					}
				})
			},
			// 获取地理位置
			getLocationInfo() {
				var that = this;
				this.amapObject = new amapFile.AMapWX({
					key: 'c8f7954d1f55fc747ddb3dd039bc9cae'
				})
				// 
				this.amapObject.getRegeo({
					iconPath: "../../static/cc-marker.png",
					success: (res) => {
						console.log(res, res[0].regeocodeData.formatted_address)
						// 移动到当前位置
						that.toLocation(res)
						that.latitude = res[0].latitude;
						that.longitude = res[0].longitude;
						//显示当前定位地址
						that.local = res[0].regeocodeData.formatted_address


						// 地图半径画圆
						this.circles = [{
							latitude: res[0].latitude,
							longitude: res[0].longitude,
							fillColor: "rgba(255,42,65,0.08)",
							color: "#FF0000",
							radius: 50,
						}]
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			toLocation(obj) {
				// 改变地图中心位置
				console.log(obj)
				mapCtx.moveToLocation(obj)
				// 移动标记点并添加动画效果
				mapCtx.translateMarker({
					markerId: 1,
					autoRotate: false,
					duration: 100,
					destination: {
						latitude: obj.latitude,
						longitude: obj.longitude,
					},
					animationEnd() {
						console.log('animation end')
					}
				})
			},
			// 获取用户点击位置的经纬度、位置描述信息
			poitap: function(e) {
				console.log(e, "poitap")
				var obj = e.detail
				self.toLocation(obj)
				console.log(e.detail.name)
				this.local = e.detail.name
				console.log(this.latitude, this.longitude)
				var distance = this.getDistance(this.latitude, this.longitude, e.detail.latitude, e.detail.longitude)
				distance = parseInt(distance * 1000);
				if (distance != null && distance > 0) {
					this.range = distance + "米";
					if (distance >= 1000) {
						this.range = (Math.round(distance / 100) / 10).toFixed(1) + "公里";
					}
				}
			},
			//存的是点击的地名
			goback() {
				console.log(this.local)
				uni.setStorageSync('local', this.local)
				uni.navigateBack()
			},
			// 计算距离
			getDistance: function(lat1, lon1, lat2, lon2) {
				var EARTH_RADIUS = 6378.137; //地球半径
				var radLat1 = lat1 * Math.PI / 180.0;
				var radLat2 = lat2 * Math.PI / 180.0;
				var radlon1 = lon1 * Math.PI / 180.0;
				var radlon2 = lon2 * Math.PI / 180.0;
				//差值
				var vLat = radLat1 - radLat2;
				var vLon = radlon1 - radlon2;
				//s就是一个球体上的切面，它的圆心即是球心的一个周长最大的圆。
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(vLat / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) *
					Math.pow(Math.sin(vLon / 2), 2)));
				s = s * EARTH_RADIUS;
				var distance = Math.round(s * 10000) / 10000;
				return distance;
			}
		}
	}
</script>


<style lang="scss" scoped>
	.map_container {
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: absolute;
		top: 0;
		bottom: 80px;
		left: 0;
		right: 0;

		.map {
			height: 100%;
			width: 100%;
		}
	}

	.location {
		width: 95%;
		height: auto;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0px;
		// height: 80px;
		background: #fff;
		padding: 2.5%;
		overflow: hidden;

		.distance {
			color: #4295FA;
			font-size: 12px;
		}
	}
	.header {
	    position: fixed;
	    top: 30rpx;
	    left: 80rpx;
	    width: 80%;
	    z-index: 999;
	    background-color: #fff;
	  }
</style>
